<template>
  <div class="syncMainPlugin">
    <c-title :hide="false" :text="plugName + '划转'"></c-title>
    <diyBackGround :minHeight="'8.5rem'"></diyBackGround>
    <div class="headTop">
      <div class="selectInp" @click="showPicker = true">
        <div class="txt">{{ selectObj && selectObj.name ? selectObj.name : shop_list[0].name }}</div>
        <i class="iconfont icon-xia"></i>
      </div>
      <div class="line">
        <div class="lis" v-for="(item, index) in asset_list" :key="index">
          <div class="left">{{ item.title }}</div>
          <div class="right">{{ item.value }}</div>
        </div>
      </div>
      <div class="inpBox">
        <div class="title">{{ plugName }}划转</div>
        <van-field v-model="val" label="" placeholder="0.00" />
        <div class="button" @click="transfer">确认转账</div>
      </div>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker show-toolbar :columns="shop_list" :value-key="'name'" @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
import diyBackGround from "../member/balance/componet/diyBackGround";
export default {
  data() {
    return {
      val: "",
      plugName: "消费积分",
      selectObj: {},
      shop_list: [],
      asset_list: [],
      showPicker: false,
      isclick:false
    };
  },
  activated() {
    this.isclick = false;
    this.getData();
  },
  methods: {
    onConfirm(e) {
      this.selectObj = e;
      this.showPicker = false;
    },
    async getData(key = "") {
      let urlstr = "";
      if (this.$route.params.plugin == "integral") {
        urlstr = "plugin.sync-main.frontend.modules.integral.controllers.page.index";
      } else if (this.$route.params.plugin == "love") {
        urlstr = "plugin.sync-main.frontend.modules.love.controllers.page.index";
      } else {
        urlstr = "plugin.sync-main.frontend.modules.point.controllers.page.index";
      }
      let res = await $http.get(urlstr, {}, "加载中..");
      if (res.result == 1) {
        this.shop_list = res.data.shop_list;
        this.asset_list = res.data.asset_list;
        if (res.data.shop_list.length > 0 && key != "update") {
          this.selectObj = res.data.shop_list[0];
        }
        if (this.$route.params.plugin == "integral") {
          this.plugName = res.data.integral_name;
        } else if (this.$route.params.plugin == "love") {
          this.plugName = res.data.love_name;
        } else {
          this.plugName = res.data.point_name;
        }
        this.fun.setWXTitle(`${this.plugName}划转`);
      } else {
        this.$toast(res.msg);
      }
    },
    async transfer() {
      if(this.isclick) { 
        this.$toast('正在划转请稍后');
        return
      };
      this.isclick = true;
      if (!this.val) {
        this.$toast("请输入划转的数量");
        return;
      }
      let urlstr = "";
      let json = {
        transfer_type: this.selectObj.key,
        change_value: this.val
      };
      if (this.$route.params.plugin == "integral") {
        urlstr = "plugin.sync-main.frontend.modules.integral.controllers.transfer.index";
      } else if (this.$route.params.plugin == "love") {
        urlstr = "plugin.sync-main.frontend.modules.love.controllers.transfer.index";
      } else {
        urlstr = "plugin.sync-main.frontend.modules.point.controllers.transfer.index";
      }
      let res = await $http.get(urlstr, json, "加载中..");
      if (res.result == 1) {
        this.$toast("划转成功");
        this.val = "";
        this.getData("update");
        this.isclick = false;
      } else {
        this.$toast(res.msg);
        this.isclick = false;
      }
    }
  },
  components: { diyBackGround }
};
</script>
<style lang="scss" scoped>
.headTop {
  margin: 0 0.75rem;
  margin-top: -6.87rem;
  .inpBox {
    padding: 0.94rem 0.75rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
    background: #fff;
    margin-top: 0.63rem;
    .title {
      text-align: left;
      margin-bottom: 1.25rem;
    }
    .van-cell {
      padding: 0;
      font-size: 1.5rem;
    }
    .button {
      margin-top: 1.91rem;
      background: #fe5e56;
      border-radius: 1.28rem;
      padding: 0.78rem;
      font-size: 0.94rem;
      line-height: 1.1rem;
      color: #ffffff;
    }
  }
  .line {
    background: #fff;
    border-radius: 0.5rem;
    .lis {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.06rem 0;
      margin: 0 0.75rem;
      box-sizing: border-box;
      border-bottom: 1px solid #f0f0f1;
    }
    .lis:last-child {
      border: none;
    }
  }
  .selectInp {
    margin-bottom: 1.25rem;
    width: 10.59rem;
    height: 1.75rem;
    background: #f68787;
    border-radius: 1.03rem;
    font-size: 0.81rem;
    display: flex;
    align-items: center;
    padding: 0 0.81rem;
    box-sizing: border-box;
    overflow: hidden;
    color: #fff;
    .txt {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon-xias {
      flex-shrink: 0;
      margin-left: 0.3rem;
    }
  }
}
</style>
